<script setup lang="ts">
import { Position, Handle } from "@vue-flow/core";
import { NodeToolbar } from "@vue-flow/node-toolbar";
import { computed } from "vue";

// props 类型定义
const props = defineProps({
  id: String,
  data: {
    type: Object,
    required: true,
    default: () => ({
      toolbarVisible: false,
      toolbarPosition: "top" as Position,
      label: ""
    })
  }
});

// 根据传入的 data.isEmission 计算显示的按钮
const actions = computed(() => {
  const baseActions = ["查看详情"];
  return props.data.isEmission === 1 ? [...baseActions, "添加输入", "添加输出"] : baseActions;
});

const handleType = "default"; // 添加节点类型标识

// 发射事件
defineEmits(["toolbar-action"]);
</script>

<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition as Position">
    <button v-for="action of actions" :key="action" type="button" @click="$emit('toolbar-action', action, props.id, handleType)">
      {{ action }}
    </button>
  </NodeToolbar>
  <div style="display: flex; align-items: center">
    <span class="index">{{ id }}</span>
    {{ data.label }}
  </div>
  <Handle type="target" :position="Position.Top" id="top" style="opacity: 0" />
  <Handle type="source" :position="Position.Bottom" id="bottom" style="opacity: 0" />
  <Handle
    type="target"
    :position="Position.Left"
    id="left"
    style="width: 7px; height: 23px; background-color: #009688; border-radius: 4px"
  />
  <Handle
    type="source"
    :position="Position.Right"
    id="right"
    style="width: 7px; height: 23px; background-color: #009688; border-radius: 4px"
  />
</template>

<style scoped>
.index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; /* 圆圈的宽度 */
  height: 20px; /* 圆圈的高度 */
  margin-right: 10px;
  font-size: 13px; /* 数字的大小 */
  font-weight: bold; /* 数字加粗 */
  line-height: 1; /* 行高，确保数字垂直居中 */
  color: #ffffff; /* 数字的颜色 */
  text-align: center;
  background-color: #009688; /* 圆圈的背景颜色 */
  border-radius: 50%; /* 使其变为圆形 */
}
</style>
